<template>
  <div class="course">
    <nav-bar class="nav-bar-position">
      课程列表

    </nav-bar>
    <white-space/>

    <header class="course-header">

      <my-img
        :src="courseDetail.small_picture"
        @tap="navigateToMiniProgram"
        :class="['course-header-post',plant === 'wx' && 'buy']"
      />

      <section class="course-header-intro">
        <div class="name">课程名称：{{ courseDetail.name }}</div>
        <div class="time">有效期：{{ courseDetail.validity }}</div>

        <div class="buttons">
          <div :class="type !== 'all' ? 'active' : 'but'" @tap="switchTab()">
            未学
          </div>
          <div
            :class="type === 'all' ? 'active' : 'but'"
            @tap="switchTab('all')"
            class="but"
          >
            全部
          </div>
        </div>
      </section>
    </header>

    <footer class="course-footer">
      <ul class="course-list">
        <li
          :key="i"
          :style="{
            backgroundImage: `url(${imageUrl}/img/bg_shadow_b@2x.png)`,
            backgroundColor: i === 0 ? '#F5FBFC' : ''
          }"
          class="course-item"
          v-for="(course, i) in currentList.lesson"
        >
          <div
            :style="{
              backgroundImage: `url(${imageUrl}/img/bg${
                course.is_end ? 1 : ''
              }@2x.png)`
            }"
            @tap="
              _NavigateTo({
                url: '/pages_course/course_detail/course_detail',
                query: { id: course.id },
                i
              })
            "
            class="content"
          >
            <my-img
              :src="`ico_read_${course.is_end ? 'n' : ''}@2x.png`"
              class="book"
            />

            <section class="course-intro">
              <div class="first">第{{ course.desc }}课</div>
              <div class="name">{{ course.name }}</div>
            </section>

            <div :class="{ finish: course.is_end }" class="btn">
              {{ course.is_end ? "已学" : "未学" }}
            </div>
          </div>
        </li>
      </ul>
    </footer>

    <white-space/>
  </div>
</template>

<script>
  import { imageUrl } from "../../api/url.config";
  import * as Router from "../../utils/router";
  import { mapActions, mapGetters, mapState } from "vuex";
  import { Toast } from "../../utils/modal";

  export default {
    name: "course_list",
    data() {
      return {
        imageUrl,

        type: "all",
        currentList: {}
      };
    },
    computed: {
      ...mapState("User", [ 'plant']),
      ...mapState("Course", ["courseDetail"]),
      ...mapGetters("Course", ["courseDetailNoStudy"])
    },
    async onLoad(query) {
      const { id } = query;
      this.id = id;
    },
    async onShow() {
      const { id } = this;
      await this.reqCourseDetail({ id });
      this.switchTab();
    },
    methods: {
      ...mapActions("Course", ["reqCourseDetail", "studyMore5"]),
      ...Router,
      navigateToMiniProgram() {
        // #ifdef  APP-PLUS
        this.NavigateTo({
          url: "/pages/web-view/web-view"
        });
        // #endif
        // #ifdef  MP-WEIXIN
        uni.navigateToMiniProgram({
          appId: "wx2aee0a729f3bd390",
          // path: 'pages/index/index?id=123',
          // extraData: {
          //   'data1': 'test'
          // },
          success(res) {
            // 打开成功
          }
        });
        // #endif
      },

      async _NavigateTo({ url, query, i }) {
        if (await this.studyMore5(query)) {
          return;
        }
        const { lesson } = this.currentList;

        if (i > 0) {
          if (lesson[i - 1].is_end === 0) {
            return Toast({ title: "要完成上一关才能解锁哦" });
          }
        }

        this.NavigateTo({ url, query });
      },

      switchTab(type) {
        if (type === "all") {
          this.type = "all";
          return (this.currentList = this.courseDetail);
        }
        this.type = "";
        this.currentList = this.courseDetailNoStudy;
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../uni";

  .course {
    &-header {
      display: flex;
      align-items: center;
      padding: upx(40);
      background: white;

      &-post {
        position: relative;
        width: upx(250);
        height: upx(250);
        border-radius: upx(32);
        overflow: hidden;
      }

      .buy:after {
        z-index: 999;
        width: upx(250);
        height: upx(60);
        position: absolute;
        left: 0;
        bottom: 0;
        content: "购买课程";
        line-height: upx(60);
        text-align: center;
        @include ft(32, #fff, 500);
        background: rgba(0, 0, 0, 0.4);
      }

      &-intro {
        display: flex;
        flex-direction: column;
        margin-left: upx(40);

        .name,
        .time {
          margin-bottom: upx(30);
          @include ft(32, #5d6473, 500);
        }

        .buttons {
          display: flex;

          margin-top: upx(30);
          width: upx(380);
          height: upx(68);
          border-radius: upx(40);
          border: upx(4) solid rgba(255, 204, 24, 1);
          overflow: hidden;

          text-align: center;
          line-height: upx(68);
          @include ft(32, $theme-yellow, 500);

          .active {
            width: upx(210);
            background: linear-gradient(
                136deg,
                rgba(255, 211, 34, 1) 0%,
                rgba(255, 186, 0, 1) 100%
            );
            border-radius: upx(40);
            color: #fff;
          }

          .but {
            width: upx(210);
          }
        }
      }
    }

    &-footer {
      @include bg;
      border-radius: upx(32) upx(32) 0 0;
      margin-top: upx(30);

      .course-list {
        width: 100vw;

        .course-item {
          padding: upx(40);
          background: {
            size: 100%;
            repeat: no-repeat;
            position-y: upx(137);
          }
          margin-top: upx(-30);

          border-radius: upx(32) upx(32) 0 0;

          .content {
            display: flex;
            align-items: center;
            width: 100%;
            height: upx(128);
            background: {
              size: 100% 100%;
            }

            .book {
              width: upx(48);
              height: upx(48);
              margin-left: upx(28);
            }

            .course-intro {
              flex: 1;
              margin-left: upx(20);
            }

            .first {
              margin-bottom: 0.5em;
              @include ft(28, #fff, 500);
            }

            .name {
              @include ft(32, #fff, 500);
            }

            .btn {
              width: upx(96);
              height: upx(40);
              line-height: upx(40);
              border-radius: upx(20);
              text-align: center;
              background: rgba(255, 255, 255, 0.4);
              @include ft(26, #fff, 500);
              margin-right: upx(30);

              &.finish {
                background: #fff;
                color: $theme-yellow;
              }
            }
          }
        }
      }
    }
  }
</style>
